<template>
  <div>
    <h3>watch 侦听器</h3>
    <p>银行卡余额: {{money}}</p>
    <button @click="money= money+ 100000">发工资</button>
    <p>{{user}}</p>
    <button @click="user.age++">长一岁</button>
    <p>{{person}}</p>
    <button @click="person.name='陈乐乐'">改名</button>
    <button @click="person.desc='唱跳rap'">改邪归正</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      money: 100,
      user: {
        name: '小花',
        age: 18
      },
      person: {
        name: '嫌疑犯-窃格瓦拉',
        age: 22,
        desc: '喜欢踩点,偷电瓶车'
      }
    }
  },
  watch: {
    // 计算属性不支持异步操作(发请求) 侦听器支持
    'money'(newVal, oldVal) {
      console.log('老韩,你发钱了', newVal, '原来有', oldVal);
    },
    // 监听小花的年龄
    'user.age'(newVal, oldVal) {
      console.log('小花,你成熟了', newVal, '之前', oldVal);
      // 可以写很多业务逻辑  (调接口)
      if (newVal >= 21) {
        console.log('不要你了,你是老花');
      }else if(newVal >= 20) {
         console.log('要生娃了')
      } else {
          console.log('快点嫁人了');
      }
      
    },
    // 深度监听 (监听复杂类型,需要添加deep:true) 复杂类型内部发生任何变化都能监听到
    // 非业务需求 ,尽可能不要使用深度监听, 尽量使用非深度监听
    'person' : {
      deep: true,
      // 会一初始化就自动执行一次
      immediate: true,
      // handler是固定语法名(不能改)
      handler(newVal) {
        console.log('我变了', newVal);
      }
    }
  }
}
</script>

<style>

</style>